<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #bigbox {
            width: 320px;
            height: 500px;
            margin: 120px auto;
            /* background-color: aqua; */
            border: 1px solid black;
        }

        header {
            height: 50px;
            width: 100%;
            /* background-color: goldenrod; */
            display: flex;
            align-items: center;
        }

        header input {
            width: 270px;
            height: 35px;
            border: none;
            padding-left: 10px;
            border: none;
            background-color: #b6afaf18;
            outline: none;
        }

        header p {
            font-size: 14px;
            color: lightblue;
            padding-left: 7px;
        }

        .tank {
            width: 100%;
            height: 40px;
            /* background-color: fuchsia; */
            display: flex;
            align-items: center;
            justify-content: space-around;
        }

        .tank div {
            height: 25px;
            width: 100px;
            border-radius: 7px;
            text-align: center;
            color: white;
            background-color: rgb(53, 174, 53);
            line-height: 25px;
            font-size: 12px;
        }
        .tank div:nth-child(3){
            background-color: red;
        }

        main font {
            display: block;
            height: 20px;
            font-weight: 700;
            margin: 10px;
            /* background-color: forestgreen; */
        }

        .list {
            height: 40px;
            width: 100%;
            display: flex;
            background-color: rgba(255, 0, 0, 0.67);
            align-items: center;
            justify-content: space-between;
            color: whitesmoke;
            box-sizing: border-box;
        }
        .list.active{
            background-color: lightseagreen;
        }

        .list input {
            margin-left: 10px;
        }

        .list span {
            margin-right: 20px;
        }

        .list p {
            padding-right: 65px;
        }
        .empty{
            color: red;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="bigbox">
        <header>
            <input type="text" placeholder="输入任务名称" v-model="inputText">
            <p @click="add(item)">新增</p>
        </header>
        <main>
            <div class="tank">
                <div>全部任务{{Alltank}}</div>
                <div>已完成{{finished}}</div>
                <div>未完成{{Alltank-finished}}</div>
            </div>
            <font>任务列表</font>
            <div :class="`list ${item.status?'active':''}`" v-for="(item,index) in tanklist" :key="index">
                <input type="checkbox" @click="change(item)">
                <span>{{item.id}}</span>
                <p>{{item.content}}</p>
                <span @click="shanchu(item)">删除</span>
            </div>
            <div v-show="tanklist.length==0" class="empty">
                <p>标签空空如也！</p>
            </div>
        </main>
    </div>
</body>
</html>
<script src="./vue-2.5.21.js"></script>
<script>
    var v = new Vue({
        el: '#bigbox',
        data: {
            inputText: '',
            tanklist: [
            ]
        },
        computed:{
            Alltank(){
                return this.tanklist.length
            },
            finished(){
                return this.tanklist.filter((item)=>{return item.status}).length
            }
        },
        methods: {
            add(item) {
                if (this.inputText) {
                    var obj = { id: this.tanklist.length+1, content: this.inputText, status: false }
                    this.tanklist.push(obj)
                    this.inputText = ''
                }
            },
            change(item) {
                item.status = !item.status
            },
            shanchu(item){
                //查找要删除的元素
                var i=this.tanklist.findIndex((it)=>{
                    return it.id==item.id
                })
                 this.tanklist.splice(i,1)
            }
        }
    })
</script>